<template>
  <mk-echart :options="options" :key="key"></mk-echart>
</template>

<script>
import MkEchart from "../../libs/index.vue";
export default {
  name: "mkline",
  components: {
    MkEchart,
  },
  props: {
    xData: {
      type: Array,
      default: () => [],
    },
    yData: {
      type: Array,
      default: () => [],
    },
    minValue: {
      // 最小值
      type: String,
      default: "0",
    },
    midValue: {
      // 中间值
      type: String,
      default: "0",
    },
    maxValue: {
      // 最大值
      type: String,
      default: "0",
    },
  },
  watch: {
    xData: {
      deep: true,
      handler(val) {
        this.options.xAxis.data = val;
        this.$nextTick(() => {
          this.key = new Date().getTime();
        });
      },
    },
    yData: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.yData = newVal;
        this.setOptions();
      },
    },
  },
  data() {
    return {
      key: new Date().getTime(),
      val: 0,
      options: {},
    };
  },
  mounted() {
    this.setOptions();
  },
  methods: {
    colorCallBack(data) {
      if (data.value > this.maxValue) {
        return "#D71B21";
      } else if (data.value > 0 && data.value < this.midValue) {
        return "#E1E1E9";
      } else {
        return "#A4A3AA";
      }
    },
    setOptions() {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "5%",
          left: "8%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#dddddd",
              },
            },
            axisTick: { show: false },
            axisLabel: { color: "#333333", fontSize: "10px" },
          },
        ],
        yAxis: [
          {
            name: "mmol/L",
            nameLocation: "end",
            nameGap: 0,
            nameTextStyle: {
              color: "#666666",
              fontSize: "10px",
            },
            splitLine: { show: false }, //去除网格线
            min: 0,
            max:
              Number(this.maxValue) > 6 ? Number(this.maxValue) + 5 : Number(this.maxValue) + 2,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#dddddd",
              },
            },
            axisTick: { show: false },
            axisLabel: { show: false },
          },
        ],
        series: [
          {
            itemStyle: {
              color: this.colorCallBack,
            },
            type: "bar",
            barWidth: "10%",
            data: this.yData,
            label: {
              show: true,
              position: "top",
              formatter: "{c} mmol/L",
              color: "#666666",
              fontSize: "10",
            },
            markArea: {
              //标记区域
              data: [
                [
                  {
                    yAxis: "0",
                    name: "健康",
                    label: {
                      position: ["100%", "90%"],
                      color: "#666666",
                      fontSize: "10px",
                    },
                    itemStyle: {
                      color: "rgba(237, 237, 240, .3)",
                    },
                  },
                  {
                    yAxis: this.midValue,
                  },
                ],
                [
                  {
                    yAxis: this.midValue,
                    name: "亚健康",
                    label: {
                      position: ["100%", "90%"],
                      color: "#666666",
                      fontSize: "10px",
                    },
                    itemStyle: {
                      color: "rgba(237, 237, 240, .6)",
                    },
                  },
                  {
                    yAxis: Number(this.maxValue),
                  },
                ],
                [
                  {
                    yAxis: Number(this.maxValue),
                    name: "患病",
                    label: {
                      position: ["100%", "0%"],
                      color: "#666666",
                      fontSize: "10px",
                    },
                    itemStyle: {
                      color: "rgb(237, 237, 240)",
                    },
                  },
                  {
                    yAxis: "1200",
                  },
                ],
              ],
            },
            markLine: {
              data: [
                {
                  yAxis: "0",
                  label: {
                    position: "start",
                    color: "#666666",
                    fontSize: "10px",
                  },
                  lineStyle: {
                    color: "transparent",
                  },
                },
                {
                  yAxis: this.midValue,
                  label: {
                    position: "start",
                    color: "#666666",
                    fontSize: "10px",
                  },
                  lineStyle: {
                    color: "transparent",
                  },
                },
                {
                  yAxis: this.maxValue,
                  label: {
                    position: "start",
                    color: "#666666",
                    fontSize: "10px",
                  },
                  lineStyle: { color: "transparent" },
                },
              ],
            },
          },
        ],
      };
      this.options = option;
    },
  },
};
</script>

<style>
</style>
